<!DOCTYPE html>
<html>
<head>
    <title>Animating transform on large tiled layer.</title>
    <style type="text/css">
        #box {
            -webkit-transition: -webkit-transform 1s step-end;
            display: block;
            width: 1000px;
            height: 2000px;
            background-color: green;
        }

        #sandbox {
            height: 1000px;
            width: 1000px;
            background-color: red;
            overflow: hidden;
        }

        .end {
            transform: translate3d(0, -1000px, 0);
        }

        .start {
            transform: translate3d(0, 100%, 0);
        }
    </style>
    <script type="text/javascript">
        function run()
        {
            if (window.testRunner) {
                testRunner.useUnfortunateSynchronousResizeMode();
                testRunner.waitUntilDone();
                window.setTimeout(notifyDone, 1200);
            }
            window.onresize = function() {
                var box = document.getElementById("box");
                box.className = "end";
            }
            window.resizeTo(1600,1200);
        }
        function notifyDone()
        {
            testRunner.notifyDone();
        }
    </script>
</head>
<body onload="run()">
    <div id=description>
        The test passes if the box below turns green.
    </div>
    <div id=sandbox> 
        <div id="box" class="start"><font style="opacity:0">ABC</font></div>
    </div>
</body>
</html>